<html>
	<title>Digi Chef</title>
<head>
	<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
	<LINK REL=StyleSheet HREF="menu.css" TYPE="text/css">
</head>

<!--maybe some script and the css style file-->

<body>
<div id="main">
<div id="Header">
	<div id="info">
		<div id="nav">
			<ul>
				<li id="zishu01"><a href='index.html'><span>Home</span></a></li>
				<li id="zishu01"><a href='Recipelist.html'><span>Recipes</span></a></li>
			</ul>
		</div>
		<div id="menu">
			<div id="r1"></div>
			<div id="r2"></div>
			<div id="r3"></div>
			<div></div>
		</div>
	</div>
	this is the heading, i don't know why it is not in the center...the logo could be top left above the menu. but could be checked later...
</div>
	

<div id="sideBar">
	<h1>Please sign in</h1><br>
	<h2>Email:</h2><br>
	<h2><input type="text" name="email"></h2><br>
	<h2>Password:</h2><br>
	<h2><input type="password" name="password"></h2><br>
	<t><input type="checkbox" name="cookies">Remember me on this computer</t>
	
	<h2>
	<ul>
		<li><a href='logged.html'>Sign in</a></li>
		<li><a href='register.html'>Register</a></li>
	</ul><br>
	</h2>
	
	<p>for this part, i do want there is no space between email and the textfield...
		modify it later as well...also, the "sign in" button needs to go center<br>
		Moreover:the checkbox need to be go center as well
	</p>
</div>

<div id="mainSection">
	<h>slideShow</h><br>
	<div id="slideShow">
		test slideShow
		Here comes the slideshow..sorry about the background color, it's easy for
		me to see how the css style going. I will modify the style of font and 
		background whatever once it comes prefect. btw, the background color is 
		white for every part.
	</div><br>
	
	<h>The recipe of the day</h>
	<more><a href='recipelist.html'>---More</a></more><br>
	<div id="briefRecipe">
		<imgS><img src="cake.jpg"></imgS>
		<h><a href='result1.html'>Potato eggs</a></h><br>
		<t>ingredients1</t><br>
		<t>ingredients2</t><br>
		<t>
			sorry for this part, but i've try many ways, don't know how to change
			the size of the image.I want it to be smaller, just a brief image of 
			the dish. still work on it.
		</t>	
	</div>
		
	<div id="briefRecipe">
		<imgS><img src="cake.jpg"></imgS>
		<h>Potato eggs</h><br>
		<t>ingredients1</t><br>
		<t>ingredients2</t><br>
		<t>
			we can have many briefRecipe on one page... since we could use it as
			the result of the search. u know, instead of just recipe names. this
			might need work with the templates.
		</t>	
	</div>
</div>


</div>			

<div id="footer">
	footer:p
</div>

</body>
</html>